// import { request } from "@renderer/utils/request";
import { Layout } from "@renderer/store/modules/layouts";
export const useCode = (layoutList: Layout[], configJson: any) => {
  let importStr: string = "";
  let componentArr: string[] = [];
  let htmlStr: string = "";
  let importJsonStr: string = "";
  let requestStr: string = "";
  let variableStr: string = "";
  let timer: string = "";
  let mountedStr: string = "";
  let unMountedStr: string = "";
  let layoutAll = JSON.parse(JSON.stringify(layoutList));
  let combineArr = layoutAll.filter(
    (item) => item.componentName == "combineGroup"
  );
  let normalArr = layoutAll.filter(
    (item) => item.componentName != "combineGroup"
  );
  // 重新计算 解除组合以后的组件位置
  const cancleCombindPosition = (children, propsx, propsy, item) => {
    children.forEach((it) => {
      let xSp = it.x - propsx;
      let ySp = it.y - propsy;
      it.x = item.x + xSp;
      it.y = item.y + ySp;
    });
  };
  let cancelCombineArr = [];
  combineArr.forEach((item) => {
    let props = item.props;
    cancleCombindPosition(props.children, props.x, props.y, item);
    cancelCombineArr.push(...props.children);
  });

  let configsJsonStr = `

computed(() => ({
  width: ${configJson.width} + "px",
  height: ${configJson.height} + "px",
  backgroundColor: '${configJson.backgroundColor}',
  backgroundImage: ${
    configJson.showBgImg ? `"url('${configJson.backgroundImage}')"` : "''"
  },
  backgroundSize: "100% 100%",
  backgroundRepeat: "initial",
  backgroundAttachment: "initial",
  backgroundOrigin: "initial",
  backgroundClip: "initial",
}))


  `;

  let themeColor = "[";
  configJson.themeColor.forEach((color) => {
    themeColor += `'${color}',`;
  });
  themeColor += "]";
  let allComponentsArr = [...normalArr, ...cancelCombineArr];

  allComponentsArr.forEach((item) => {
    let jsonName = item.componentName + item.id;
    if (item.canReq) {
      variableStr += "const " + jsonName + "Data" + " = ref([]);\n";

      // 是否轮询
      if (item.request.ifPolling) {
        timer += `const ${jsonName}Timer = ref(null);\n`;
        requestStr += `
      const requery${jsonName}Method =async () =>{

        ${jsonName}Timer.value = setInterval(async()=>{

         const res  =await request('${item.request.method}','${
          item.request.baseUrl + item.request.url
        }',${JSON.stringify(item.request.params)},${JSON.stringify(
          item.request.data
        )});
        ${jsonName + "Data"}.value = res.data;

        },${item.request.pollingTime})


      }\n`;

        mountedStr += `
        requery${jsonName}Method()\n
      `;
        unMountedStr += `

          clearInterval(${jsonName}Timer.value);\n
          ${jsonName}Timer.value=null;\n

      `;
      } else {
        requestStr += `
        const requery${jsonName}Method =async () =>{
          const res  =await request('${item.request.method}','${
          item.request.baseUrl + item.request.url
        }',${JSON.stringify(item.request.params)},${JSON.stringify(
          item.request.data
        )})
        ${jsonName + "Data"}.value = res.data;
        }\n`;

        mountedStr += `
          requery${jsonName}Method()\n
        `;
      }
    }

    componentArr.push(item.componentName);
    importJsonStr += `import  ${jsonName} from "@/jsons/${jsonName}.json";\n`;
    htmlStr += ` <${item.componentName} class="absolute top-[${
      item.y
    }px] left-[${item.x}px]  ${item.animationClass}"  :width="'${
      item.width + "px"
    }'" :height="'${
      item.height + "px"
    }'" :themeColor="${themeColor}"  v-model:models="${JSON.parse(
      JSON.stringify(jsonName)
    )}" ${
      item.canReq ? "v-model:responseData='" + jsonName + "Data'" : ""
    } />\n`;
  });
  //数组去重，组件不用重复引入

  [...new Set(componentArr)].forEach((item) => {
    importStr += ` import ${item} from '@/components/modules/${item}.vue';\n`;
  });

  return {
    importJsonStr,
    importStr,
    htmlStr,
    variableStr,
    requestStr,
    configsJsonStr,
    allComponentsArr,
    mountedStr,
    timer,
    unMountedStr,
  };
};
